import {DatePicker, NavBar} from 'antd-mobile'
import './index.scss'
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import _ from "lodash";
import DailyBill from "@/page/Month/components";

const Month = () => {
    // 按照月份进行分组
    const billList = useSelector(state => state.bill.billList);
    const monthGroup = useMemo(() => {
        // 使用lodash进行分组
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY | MM'));
    }, [billList]);

    // 当前月数组
    const [currentMonthList, setCurrentMonthList] = useState([]);
    // 计算选择月统计的数据
    const monthData = useMemo(() => {
        // 如果该月份没有数据
        if (!currentMonthList) return {income: 0, pay: 0, total: 0}
        // 支出 / 收入 / 余额
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0);
        const income = currentMonthList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0);
        return {
            pay,
            income,
            total: pay + income
        }
    }, [currentMonthList]);

    // 时间选择器的切换状态：打开或关闭
    const [dateVisible, setDateVisible] = useState(false);
    // 控制时间显示状态
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs().format('YYYY | MM')
    });

    // 初始化时，把统计数据放到页面中
    useEffect(() => {
        const list = monthGroup[dayjs().format('YYYY | MM')]
        if (list) {
            setCurrentMonthList(list)
        }
    }, [monthGroup])

    // 时间选择器 确定 方法
    const onConfirm = (date) => {
        setDateVisible(false)
        const formatDate = dayjs(date).format('YYYY | MM');
        setCurrentMonthList(monthGroup[formatDate])
        setCurrentDate(formatDate)
    }

    // 当前月按照日期分组
    const dayGroup = useMemo(() => {
        // 使用lodash进行分组
        const groupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY年 MM月 DD日'));
        const keys = Object.keys(groupData);
        return {
            keys,
            groupData
        };
    }, [currentMonthList]);

    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {currentDate}月账单
            </span>
                        <span className={classNames('arrow', dateVisible && 'expand')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthData.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthData.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthData.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        // 点击蒙层按钮
                        onClose={() => {
                            setDateVisible(false)
                        }}
                        // 确定
                        onConfirm={onConfirm}
                        // 取消
                        onCancel={() => {
                            setDateVisible(false)
                        }}
                        visible={dateVisible}
                        max={new Date()}
                    />
                </div>

                {/* 单日列表统计 */}
                {
                    dayGroup.keys.map(key => {
                        return <DailyBill key={key} date={key} billList={dayGroup.groupData[key]}/>
                    })
                }

            </div>
        </div>
    )
}

export default Month